<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="商品详情" title-color="#333" title-size="36"></u-navbar>
		<view class="swiperUnit">
			<u-swiper height="750" mode="rect" :list="goodsInfo.groupbuy_image"></u-swiper>
		</view>
		<view class="layoutView">
			<view class="" style="display: flex;line-height: 32upx;padding: 40upx;">
				<!-- <view class="layoutPrice">¥{{goodsInfo.min_price}}</view> -->
				<view style="color: #FE3333;font-size: 26upx;">拼团价 ￥<text
						style="font-size: 32upx;font-weight: 550;">{{goodsInfo.groupbuy_price }}</text></view>
				<text style="color: #999999;font-size: 26upx;margin-left: 20upx;"> 单人买 ¥{{goodsInfo.goods_price}}</text>
			</view>
			<text class="layoutTitle">{{goodsInfo.goods_name}}</text>
		</view>
		<!-- 拼团详情 -->
		<view class="groupContent pd20" v-if="GroupList.length !== 0">
			<view class="groupTitle">
				<text class="" style="font-size: 28upx;">
					直接参团 立即拼成
				</text>
				<view class="more" @tap="lookMore(goodsid)">
					查看更多<u-icon size="24" color="#999999" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="dynamic" style="overflow: hidden;max-height: 110rpx;">
				<view class="dynamicItem" v-for="(item,index) in GroupList" :key="index">
					<view class="userItem">
						<image :src="item.avatar" mode=""></image>
						<text style="margin-left: 20upx;font-size: 28upx;">{{item.nickname}}</text>
					</view>
					<view class="Item">
						<view class="timeDown" style="font-size: 22upx;margin-top: 25upx;margin-right: 50upx;">
							<view class="">
								还差<text style="color: #fe512a;">{{item.total - item.count}}</text>人拼成
							</view>
							<view class="subtimer" style="display: flex;">
								还剩
								<uni-countdown color="#fe512a" splitorColor="#fe512a" :font-size="11"
									:show-day="false" :second="(item.sgo_timeout)/1000"></uni-countdown>
							</view>
						</view>
						<view class="btnItem" @click="partGroup(item)">去参团</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goodsView">
			<view class="goodsDetail">商品详情</view>
			<u-parse :html="goodsInfo.groupbuy_intro"></u-parse>
			<!-- <view class="" v-html="goodsInfo.detail"></view> -->
		</view>
		<view class="H100"></view>
		<view class="bottomView">
			<view class="btns">
<!-- 				<view class="btn btn1" @click="aloneBuy(goodsInfo)">
					<view style="font-size: 32upx;">¥{{goodsInfo.goods_price}}</view>
					<text style="font-size: 26upx;">单独购买</text>
				</view> -->
				<view class=""><u-button :hair-line="false" size="medium" open-type="contact">客服</u-button></view>
				<view class="btn btn2" @click="launchGroup(goodsInfo)">
					<view style="font-size: 32upx;">¥{{goodsInfo.groupbuy_price}}</view>
					<text style="font-size: 26upx;">{{goodsInfo.buy_min_number}}人团发起拼团</text>
				</view>
			</view>
		</view>
		<!-- 拼团弹窗 -->
		<u-popup mode="center" border-radius="16" closeable v-model="groupPopup">
			<view class="groupDetail">
				<view class="title">参与{{groupItem.nickname}}的拼团</view>
				<view class="mgt20" style="font-size: 16upx;white-space: nowrap;" >
					仅剩{{(groupItem.total - groupItem.count)}}个名额，
					<uni-countdown style="display: inline-block;" color="#01aa0d" splitorColor="#01aa0d" :font-size="11"
						:show-day="false" :second="(groupItem.sgo_timeout/1000)"></uni-countdown>后结束
				</view>
				<view class="mgt20">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view id="colonel" class="scroll-view-item_H">
							<u-avatar size="82" :src="groupItem.avatar"></u-avatar>
							<text class="colonelId">团长</text>
						</view>
						<view class="scroll-view-item_H" v-for="(item,index) in (groupItem.total - 1)" :key="index">
							<u-avatar size="82" :src="groupItem.join[index] == undefined ?groupItem.join[index]:groupItem.join[index].avater "></u-avatar>
						</view>
					</scroll-view>
				</view>
				<view class="mgt20">
					<u-button type="success" @click="submitGroupJoin(goodsInfo,groupItem)">立即参与拼团</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGroupDetail,
		getGroupbuyCreate
	} from '../../api/product.js';
	import {
		useCounterStore
	} from '@/stores/index';
	import toast from '../../uni_modules/vk-uview-ui/libs/function/toast.js';
	export default {
		data() {
			return {
				coupopPopup: false,
				groupPopup: false,
				timestamp: 86400,
				goodsid: '',
				current: 0,
				goodsImage: [],
				goodsInfo: {},
				skuList: [],
				shopInfo: {},
				buyType: 0, //0加入购物车，1立即购买
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 3,
				// 后端返回的商品信息
				skuInfo: {},
				coupopList: [],
				commentTab: [{
					name: '有图',
					count: 211
				}, {
					name: '性能强大',
					count: 1031
				}, {
					name: '速度流畅',
					count: 188
				}, {
					name: '外观大气',
					count: 2111
				}],
				GroupList: [],
				groupItem:{}
			}
		},
		onLoad(options) {
			this.goodsid = options.goodsId;
			this.initData();
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				let that = this;
				getGroupDetail(this.goodsid).then(res => {
					let list = res.data;
					// console.log(list);
					list.groupbuy_image = list.groupbuy_image;
					// list.store_details.logo = JSON.parse(list.store_details.logo);
					that.goodsInfo = list;
					that.shopInfo = list.store_details;
				}).catch()
				// 拼团动态
				getGroupbuyCreate(this.goodsid).then(res => {
					// console.log(55588,res.data);
					that.GroupList = res.data
				})
			},
			onSwiperChange(e) {
				this.current = e.detail.current
			},
			onPreview(list, index) {
				uni.previewImage({
					current: index,
					urls: list
				});
			},
			onCollect(goodsInfo) {
				let self = this;
				self.$shops.shopGoodsCollect({
					goods_id: goodsInfo.id
				}, false).then(res => {
					self.initData();
				});
			},
			onShowCoupon() {
				this.coupopPopup = true;
				// console.log(this.coupopPopup);
			},
			onPopupClose() {
				this.coupopPopup = false;
			},
			onMessage() {

			},
			onReceive(item) {
				let self = this;
				addCouponsReceive({
					coupon_id: item.id
				}).then(res => {
					toast('领取成功');
					setTimeout(function() {
						self.initCoupon();
					}, 500);
				}).catch()
			},
			onBuyGoods(skuMode) {
				// console.log(111);
				this.skuMode = skuMode;
				if (uni.getStorageSync('access_token')) {
					if (this.skuInfo && this.skuInfo.sku_list.length > 0) {
						this.skuKey = true;
					} else {

					}
				} else {
					// #ifdef APP-PLUS || H5
					uni.navigateTo({
						url: '/pages/login/login'
					});
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/wx-login/wx-login'
					});
					// #endif
				}
			},
			onGoodsBuy(res) {
				let data = {
					goods_id: res.goods_id, //商品id
					goods_name: res.goods_name, //商品标题
					goods_price: res.price, //商品标题
					goods_cover: res.image, //图片
					goods_sku_name: res.sku_name_arr.join(','), //规格名称
					goods_number: res.buy_num, //数量
					goods_sku_id: res._id,
					shopName: this.shopInfo.name
				}
				uni.navigateTo({
					url: '/pages/order-confirm/order-confirm?goods=' + JSON.stringify(data)
				});
			},
			// 查看更多
			lookMore(){
				uni.navigateTo({
					url:'/page/group-more/group-more?goodsid=' + this.goodsid
				})
			},
			//参团弹窗
			partGroup(item) {
				this.groupPopup = true;
				this.groupItem = item;
			},
			// 参与拼团
			submitGroupJoin(shop,item){
				// console.log(item);
				uni.navigateTo({
					url:'/page/group-order-confirm/group-order-confirm?contents='+ encodeURIComponent(JSON.stringify(shop)) + '&lanuch=3&orderNo='+ item.sgo_ordersn,
				})
			},
			// 发起拼团
			launchGroup(item){
				uni.navigateTo({
					url:'/page/group-order-confirm/group-order-confirm?contents='+ encodeURIComponent(JSON.stringify(item)) + '&lanuch=1',
				})
			},
			// 单独购买
			aloneBuy(item){
				console.log(item);
				uni.navigateTo({
					url:'/page/group-order-confirm/group-order-confirm?contents='+ encodeURIComponent(JSON.stringify(item)) + '&lanuch=2',
				})
			}
		}
	}
</script>

<style>

	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.mgt20{
		margin-top: 20upx;
	}
	.swiper-wrapper {
		position: relative;

		.swiper {
			width: 100%;
			height: 100rpx;
		}

		.swiper-item {
			padding: 0 20rpx;
			height: 100rpx;
		}

	}

	.more {
		float: right;
		color: #999999;
		font-size: 24upx;
	}

	.groupContent {
		background-color: #fff;
		padding: 20upx;
		margin-top: 20upx;

		.dynamicItem {
			display: flex;
			justify-content: space-between;
			background-color: #EEFEEF;
			margin: 20upx;
			border-radius: 5upx;
		}

		.Item {
			display: flex;
			// line-height: 100upx;
		}

		.btnItem {
			line-height: 50upx;
			margin-top: 25upx;
			background-color: #01A90C;
			color: #fff;
			width: 126upx;
			height: 50upx;
			border-radius: 25upx;
			text-align: center;
			margin-right: 20upx;
		}

		.u-count-down {
			// >>span {
			// 	color: orangered;
			// }
		}
	}

	.shopInfo {
		margin: 20upx 0;
		display: flex;
		background-color: #fff;
		padding: 20upx;

		.shopImg {
			width: 80upx;
			height: 80upx;
			border-radius: 6upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.shopName {
			flex: 1;
			margin-left: 10upx;
		}

		.shopNum {
			font-size: 22upx;
			color: #999;
			margin-top: 10upx;
		}

		.icon {
			float: right;
		}
	}

	.btns {
		display: flex;
		width: 100vw;
		justify-content: space-around;
		align-self: center;

		.btn {
			width: 268upx;
			height: 76upx;
			// line-height: 76upx;
			text-align: center;
			border-radius: 38upx;
			color: #fff;
		}

		.btn1 {
			background-color: #FFA114;
		}

		.btn2 {
			background-color: #FE512A;
		}
	}

	.groupDetail {
		// width: 442upx;
		// height: 388upx;
		max-width: 542upx;
		padding: 68upx;
		text-align: center;
		.scroll-view_H {
			width: 100%;
			white-space: nowrap;
			justify-content: space-around;
		}
		.scroll-view-item_H {
			display: inline-block;
			text-align: center;
			border-radius: 50%;
			margin:0 10upx;
		}
		#colonel{
			position: relative;
		}
		.colonelId{
			white-space: nowrap;
			font-size: 18upx;
			background-color: #FB992B;
			padding: 1upx 5upx;
			border-radius: 5px;
			color: #fff;
			text-align: center;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.dynamicItem{
		.userItem{
			>image{
				width: 80upx;
				height: 80upx;
				vertical-align: middle;
				border-radius: 50%;
				margin-right: 10upx;
			}
		}
		.subtimer{
			font-size: 20upx;
		}
	}
</style>